<template>
  <div class="icon-popup-container">
    <!-- 图标按钮 -->
    <div class="icon-button">
      <el-tooltip class="box-item" effect="dark" content="切换地图模式" placement="left">
        <svg-icon icon-class="功能list-5" class-name="map-icon" @click="togglePopup" />
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="前往泉城路" placement="left">
        <svg-icon icon-class="fast" class-name="map-icon" @click="goQuanchengRoad" />
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="打开预警分析一张图" placement="left">
        <svg-icon icon-class="EWA" class-name="map-icon" @click="openAnalyzeAndWarn" v-if="isShowEarlyWarning" />
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="打开电子围栏" placement="left">
        <svg-icon icon-class="EF" class-name="map-icon" @click="openElectronicFence" v-if="isShowEarlyWarning" />
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="打开管线绘制" placement="left">
        <svg-icon icon-class="绘制管线" class-name="map-icon" @click="openPipeDrawing" v-if="isShowEarlyWarning" />
      </el-tooltip>
    </div>

    <!-- 左侧弹出框 -->
    <div class="popup-box" :class="{ 'show': isPopupVisible }" @click.stop>
      <div class="popup-content">
        <div class="communal-container imageMap-box" :class="{ 'selected': selectedType === 'imageMap' }" @click="selectItem('imageMap')">
          <div class="title-box">影像地图</div>
          <div class="selected-icon" v-if="selectedType === 'imageMap'">✓</div>
        </div>
        <div
          class="communal-container administrativeMap-box"
          :class="{ 'selected': selectedType === 'administrativeMap' }"
          @click="selectItem('administrativeMap')"
        >
          <div class="title-box">行政地图</div>
          <div class="selected-icon" v-if="selectedType === 'administrativeMap'">✓</div>
        </div>
      </div>

      <!-- 小箭头指向图标 -->
      <div class="popup-arrow"></div>
    </div>

    <!-- 点击外部关闭的遮罩层 -->
    <div class="popup-mask" v-if="isPopupVisible" @click="closePopup"></div>
    <analyzeAndWarn v-model:visible="dialogVisible" v-if="isShowEarlyWarning" />
    <electronicFence v-model:visible="ElectronicFenceVisible" v-if="isShowEarlyWarning" />
    <pipeDrawing ref="pipeDrawingRef" v-if="isShowEarlyWarning" />
  </div>
</template>

<script lang="ts" setup>
import { useToggleMap } from '@/hooks/useToggleMap';
import analyzeAndWarn from '@/components/analyzeAndWarn/index.vue';
import router from '@/router';
import pipeDrawing from '@/components/PipeDrawing/index.vue';

defineProps({
  isShowEarlyWarning: {
    type: Boolean,
    default: false
  }
});
const { togglePopup, closePopup, selectedType, selectItem, isPopupVisible } = useToggleMap();
const dialogVisible = ref<boolean>(false);
const ElectronicFenceVisible = ref<boolean>(false);
const pipeDrawingRef = ref<InstanceType<typeof pipeDrawing>>();
//打开预警分析
const openAnalyzeAndWarn = () => {
  dialogVisible.value = true;
};
//打开电子围栏
const openElectronicFence = () => {
  ElectronicFenceVisible.value = true;
};
//前往泉城路
const goQuanchengRoad = () => {
  router.push('/QuanchengRoad');
};
//打开管线绘制
const openPipeDrawing = () => {
  pipeDrawingRef.value.openDialog();
};
</script>

<style scoped>
/* 之前的样式保持不变 */
.icon-popup-container {
  position: relative;
  display: inline-block;
}

.icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .map-icon {
    width: 1.5em;
    height: 1.5em;
    margin-bottom: 5px;
  }
}

.popup-box {
  position: absolute;
  top: 50%;
  right: 100%; /* 定位到图标左侧 */
  transform: translateY(-50%);
  margin-right: 10px; /* 与图标的间距 */
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
}

.popup-box.show {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  width: 200px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.communal-container {
  position: relative;
  width: 68px;
  height: 68px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.communal-container.selected {
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.5);
}

.title-box {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  color: white;
  padding: 4px;
  font-size: 12px;
}

.selected-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.imageMap-box {
  background: url(@/assets/largescreen/yingxiang-map.png) no-repeat center center / cover;
}

.administrativeMap-box {
  background: url(@/assets/largescreen/xingzheng-map.png) no-repeat center center / cover;
}

.popup-arrow {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  filter: drop-shadow(1px 0 1px rgba(0, 0, 0, 0.1));
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: transparent;
}
</style>
